$color:#67a8b7;
$gradient:linear-gradient(to right, #266d96, #64a5b4);
@function s($px) {
    @return ($px / 75) * 1rem;
}



/*sweetalert.css*/

.sweet-alert {
    padding: s(30);
    border-radius: s(10);
    width: s(478);
    margin-left: s(-256);
    h2 {
        font-size: s(36);
        margin: s(20) 0;
        line-height: s(50);
    }
    button {
        font-size: s(32);
        padding: s(8) s(28);
        border-radius: s(10);
    }
}


/*checkbox radio.css*/

input[type=checkbox] {
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: s(15);
    height: s(15);
    margin-top: 0;
    margin-right: 5px;

    cursor: pointer;
    vertical-align: middle;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=radio] {
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: s(30);
    height: s(30);
    margin: 0 s(5) s(2) 0;

    cursor: pointer;
    vertical-align: middle;

    -webkit-border-radius: s(15);
    -moz-border-radius: s(15);
    border-radius: s(15);

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=checkbox]:hover {
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    outline: none;
}

input[type=checkbox]:checked::after {
    position: absolute;
    top: -4px;
    right: 0;
    left: 2px;

    display: block;

    content: url(../images/check.png);
}

input[type=checkbox]:focus {
    outline: none;
}

input[type=radio]:checked::after {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: s(24);
    height: s(24);

    content: '';
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: s(12);
    -moz-border-radius: s(12);
    border-radius: s(12);
}



input[type=checkbox],
input[type=radio] {
    border: 1px solid #199ed8;
    background: #fff;
}

input[type=checkbox]:active,
input[type=radio]:active {
    border-color: #03b8d8;
    background: #4B96DA;
}

input[type=checkbox]:hover,
input[type=checkbox]:focus {
    border-color: #4B96DA;
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    background: #fff;
}

input[type=radio]:checked::after {
    background: #4B96DA;
}


/*popover.css*/

.popover {
    font-size: s(24);
}



/*bootstrap modal*/

.modal-header {
    padding: s(30);
    .close {
        font-size: s(32);
    }
}

.modal-title {
    font-size: s(36);
    font-weight: 600;
}

.modal-body {
    padding: s(30);
    .form-group {
        label {
            font-size: s(28);
            font-weight: 500;
            margin-bottom: s(10);
        }
        .form-control {
            height: s(68);
            font-size: s(28);
        }
    }
}

.modal-footer {
    padding: s(30);
    .btn {
        font-size: s(28);
        padding: s(12) s(24);
    }
}






/*color.css*/

.normal {
    color: #58bd58 !important;
}

.abnormal {
    color: orange !important;
}

.special {
    font-weight:800;
    font-size:s(34) !important;
}





/*slidebar--open*/

.slidebar-nav--open {
    overflow: hidden;
}










/*mask*/

.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 100;
    display: none;
}










/*login.css*/

.header {
    height: s(88);
    line-height: s(88);
    h1 {
        line-height: s(88);
        text-align: center;
        font-size: s(40);
        background: $color;
        color: #fff;
    }
}

.login-container {
    .logo-wrapper {
        height: s(250);
        width: s(250);
        margin: s(100) auto 0;
        .logo {
            width: 100%;
        }
    }
    .login-wrapper {
        padding: s(20);
        margin-top: s(86);
        .item {
            line-height: s(80);
            position: relative;
            margin-bottom: s(20);
            .login-icon {
                position: absolute;
                top: 0;
                left: s(15);
                font-size: s(40);
                color: $color;
            }
            input {
                height: s(80);
                width: 100%;
                padding-left: s(68);
                color: #999;
                font-size: s(32);
            }
        }
        .login-btn {
            margin-top: s(88);
            width: 100%;
            height: s(80);
            border-radius: s(40);
            background: $gradient;
            color: #fff;
            font-size: s(32);
        }
    }
}








/*index.css*/

.index-header {
    height: s(88);
    width: 100%;
    line-height: s(88);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    h1 {
        line-height: s(88);
        text-align: center;
        font-size: s(40);
        background: $color;
        color: #fff;
        .logout {
            position: absolute;
            right: s(20);
            font-size: s(36);
            .logout-icon {
                font-size: s(40);
            }
        }
    }
}

.index-container {
    height: 100%;
    padding: s(106) s(40) s(60);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            width: 45%;
            text-align: center;
            padding: s(20);
            box-shadow: 0 s(2) s(10) #9bd0dc;
            border-radius: s(4);
            margin-bottom: s(40);
            img {
                width: s(165);
                height: s(165);
            }
            p {
                margin-top: s(20);
                font-size: s(32);
                color: $color;
            }
        }
    }
}









/*detail.css*/

.main {
    position: relative;
    height: 100vh;
    .slidebar-nav {
        position: fixed;
        height: 100%;
        width: s(486);
        background: #fff;
        right: s(-486);
        z-index: 100;
        transition: all .3s;
        &.nav--open {
            right: 0;
        }
        &.nav-close {
            right: -s(486);
        }
        .nav-logo {
            background: $color;
            height: s(300);
            overflow: hidden;
            .logo-wrapper {
                margin: s(42) auto s(30);
                width: s(150);
                height: 0;
                overflow: hidden;
                padding-bottom: 32%;
                img {
                    width: 100%;
                }
            }
            .user-name {
                font-size: s(36);
                text-align: center;
                color: #fff;
            }
        }
        .slidebar-content {
            padding: s(20) s(100);
            .nav-tabs {
                border: none;
                &>li {
                    margin: 0;
                    float: none;
                    padding: 0 s(20);
                    &>a {
                        margin-right: 0;
                        line-height: s(80);
                        padding: 0;
                        border-radius: 0;
                        font-size: s(32);
                        color: #333;
                        border: none;
                        &:focus {
                            background-color: transparent;
                        }
                        &:hover {
                            background-color: transparent;
                        }
                        .icon-item {
                            font-size: s(32);
                            margin-right: s(20);
                            color: #333;
                            font-weight: 600;
                        }
                    }
                }
            }
            .nav-tabs>li.active>a,
            .nav-tabs>li.active>a:focus,
            .nav-tabs>li.active>a:hover {
                color: #333;
                border: none;
            }
        }
        .nav-footer {
            background: $gradient;
            width: 100%;
            height: s(90);
            line-height: s(90);
            text-align: center;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            font-size: s(36);
            .logout {
                font-size: s(40);
            }
        }
    }

    .detail-header {
        height: s(88);
        width: 100%;
        line-height: s(88);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        h1 {
            line-height: s(88);
            text-align: center;
            font-size: s(40);
            background: $color;
            color: #fff;
            .back-arrow {
                position: absolute;
                left: 0;
                font-size: s(48);
                font-weight: 600;
                cursor: pointer;
                display: inline-block;
                width: s(80);
            }
            .logo-content {
                position: absolute;
                top: 0;
                right: s(20);
                width: s(66);
                .toggle-logo {
                    width: 100%;
                }
            }
        }
    }

    .monitor-container {
        height: 100%;
        padding: s(108) s(50) s(100);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        ul {
            li {
                display: flex;
                justify-content: space-between;
                line-height: s(80);
                span {
                    font-size: s(32);
                    &:first-child {
                        color: #7e7e7e;
                    }
                }
                .tag-style {
                    width: s(320) !important;
                    word-wrap: break-word;
                    text-align: right;
                    line-height: s(50);
                }
                .set-content {
                    span {
                        color: #333;
                    }
                    .set-btn {
                        margin-left: s(20);
                        padding: s(5) s(20);
                        vertical-align: baseline;
                        color: #fff;
                        font-size: s(32);
                        background: $gradient;
                        border-radius: s(10);
                    }
                }
            }
        }
    }
}